<template>
  <div class="big-div">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="环境" name="second">
        <div class="y-conter">
          <div class="y-top">
            <div class="y-div-left">
              <span class="y-title">实时监控数值</span>
              <div class="l-div-left-all">
                <div class="l-div-left">
                  <div class="l-div-left-1">
                    <div class="l-div-left-1-1">
                      <img src="../../static/img/1.png" alt />
                    </div>
                    <div class="l-div-left-1-2">
                      <div class="l-div-left-1-2-1">{{ arr.weather_wind }}m/s</div>
                      <div class="l-div-left-1-2-2">风速</div>
                    </div>
                    <div class="l-div-left-1-3">
                      <div class="l-div-left-1-2-1">12m/s</div>
                      <div class="l-div-left-1-2-2">预警值</div>
                    </div>
                  </div>
                  <div class="l-div-left-1">
                    <div class="l-div-left-1-1">
                      <img src="../../static/img/2.png" alt />
                    </div>
                    <div class="l-div-left-1-2">
                      <div class="l-div-left-1-2-1">{{ arr.weather_pmtwo }}m/s</div>
                      <div class="l-div-left-1-2-2">PM2.5</div>
                    </div>
                    <div class="l-div-left-1-3">
                      <div class="l-div-left-1-2-1">100m/s</div>
                      <div class="l-div-left-1-2-2">预警值</div>
                    </div>
                  </div>
                  <div class="l-div-left-1">
                    <div class="l-div-left-1-1">
                      <img src="../../static/img/3.png" alt />
                    </div>
                    <div class="l-div-left-1-2">
                      <div class="l-div-left-1-2-1">{{ arr.weather_temperature }}℃</div>
                      <div class="l-div-left-1-2-2">温度</div>
                    </div>
                    <div class="l-div-left-1-3">
                      <div class="l-div-left-1-2-1"></div>
                      <div class="l-div-left-1-2-2"></div>
                    </div>
                  </div>
                </div>
                <div class="l-div-left">
                  <div class="l-div-left-1">
                    <div class="l-div-left-1-1">
                      <img src="../../static/img/4.png" alt />
                    </div>
                    <div class="l-div-left-1-2">
                      <div class="l-div-left-1-2-1">{{ arr.weather_noise }}db</div>
                      <div class="l-div-left-1-2-2">噪音</div>
                    </div>
                    <div class="l-div-left-1-3">
                      <div class="l-div-left-1-2-1">70db</div>
                      <div class="l-div-left-1-2-2">预警值</div>
                    </div>
                  </div>

                  <div class="l-div-left-1">
                    <div class="l-div-left-1-1">
                      <img src="../../static/img/6.png" alt />
                    </div>
                    <div class="l-div-left-1-2">
                      <div class="l-div-left-1-2-1">{{ arr.weather_pmten }} 0ug/m3</div>
                      <div class="l-div-left-1-2-2">PM10</div>
                    </div>
                    <div class="l-div-left-1-3">
                      <div class="l-div-left-1-2-1">200ug/m3</div>
                      <div class="l-div-left-1-2-2">预警值</div>
                    </div>
                  </div>
                  <div class="l-div-left-1">
                    <div class="l-div-left-1-1">
                      <img src="../../static/img/5.png" alt />
                    </div>
                    <div class="l-div-left-1-2">
                      <div class="l-div-left-1-2-1">{{ arr.weather_humidity }}%</div>
                      <div class="l-div-left-1-2-2">湿度</div>
                    </div>
                    <div class="l-div-left-1-3">
                      <div class="l-div-left-1-2-1"></div>
                      <div class="l-div-left-1-2-2"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 天气 -->
            <div class="y-div-right">
              <div class="f-adiv1-zi">实时天气情况</div>
              <div class="tian">
                <div id="weather-v2-plugin-simple"></div>
              </div>
            </div>
          </div>
          <!-- 左侧预警趋势 -->
          <div class="y-yj">
            <div class="y-row-1">
              <div class="y-tab-left">
                <span class="y-font-1">设备预警趋势</span>
              </div>
              <div class="chart1">
                <ve-line :data="chartData" :settings="chartSettings"></ve-line>
              </div>

              <!-- <div class="y-tab-right">

                <el-tabs v-model="active" type="card" @tab-click="handle">
                  <el-tab-pane label="次数" name="first"> </el-tab-pane>
                  <el-tab-pane label="风速" name="second"> </el-tab-pane>
                  <el-tab-pane label="噪声" name="third"> </el-tab-pane>
                  <el-tab-pane label="PM2.5" name="fourth"> </el-tab-pane>
                  <el-tab-pane label="PM10" name="foured"> </el-tab-pane>
                </el-tabs> 
              </div>-->
            </div>
            <!-- 右侧监控 -->
            <div class="y-row-2">
              <div class="jk-1">
                <span class="y-font-3">监控摄像头3</span>
              </div>
              <div class="jiankong1">
                <img src="../../static/TaDiao-img/jiankong3.jpg" alt />
              </div>
            </div>
            <div class="y-row-3">
              <div class="jk-2">
                <span class="y-font-3">监控摄像头3</span>
              </div>
              <div class="jiankong1">
                <img src="../../static/TaDiao-img/jiankong2.jpg" alt />
              </div>
            </div>
          </div>
          <!-- 报警历史表格 -->
          <div class="y-table-1">
            <div class="y-row-4">
              <!-- 输入框 -->
              <div class="y-put">
                <span class="y-s-2">报警历史</span>
                <div class="l-ta4-1-right">
                  <!-- <el-form-item prop="people_give"> -->
                  <div>状态</div>
                  <div>
                    <el-select v-model="ruleForm.alarminfo_status" placeholder="请选择">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </div>
                  <div>
                    <el-button type="primary" @click="search()">搜索</el-button>
                  </div>
                </div>
              </div>
              <!-- 表格 -->
              <div class="table">
                <!-- 表格部分 -->
                <div class="y-table">
                  <el-table
                    ref="singleTable"
                    :data="currList"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    :header-cell-style="{
                      background: '#f5f7fa',
                      color: '#606266',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column align="center" type="index"></el-table-column>
                    <el-table-column
                      align="center"
                      property="alarminfo_start"
                      show-overflow-tooltip
                      label="报警时间"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      property="alarminfo_deal"
                      label="处理时间"
                      show-overflow-tooltip
                      width="120"
                    ></el-table-column>
                    <el-table-column align="center" property="equipment_name" label="设备名称"></el-table-column>
                    <el-table-column align="center" property="alarminfo_text" label="报警原因"></el-table-column>
                    <el-table-column align="center" property="alarminfo_status" label="状态">
                      <template slot-scope="scope">
                        <!-- <span v-text="scope.row.admin_lastloginstate=='0'?'启用':'禁用'"></span> -->
                        <span style="color:red" v-if="scope.row.alarminfo_status=='0'">未处理</span>
                        <span style="color:green" v-else>已处理</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="l-fen">
                    <div class="f-fenye">
                      <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="tableData.length"
                        :page-size="pageSize"
                        @current-change="changePage"
                      ></el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 预警统计 -->
            <div class="y-row-5">
              <div class="y-s-1">
                <span>预警统计类型</span>
              </div>
              <div class="biao2">
                <ve-ring :data="chartData1"></ve-ring>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import http from "../api";
export default {
  data() {
    this.chartSettings = {
      metrics: ["日期", "次数"],
      dimension: ["日期"],
    };
    return {
      timer: null, //定时器名称
      // 标签页
      activeName: "second",
      active: "first",
      arr: {},
      arr1: {},
      char1: [],
      char2: [],
      options1: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "已处理",
        },
      ],
      ruleForm: {
        alarminfo_status: "",
        equipment_type_id: 4,
      },

      // 输入框
      formInline: {
        equipment_start: "",
      },
      // 分页
      tableData: [], //总数居
      currPage: 1, //当前页
      pageSize: 5, //每页数据量
      currList: [], //当前展示的数据数组
      chartData: {
        columns: ["日期", "次数"],
        rows: [
          { 日期: "1月", 次数: 13 },
          { 日期: "2月", 次数: 35},
          { 日期: "3月", 次数: 17},
          { 日期: "4月", 次数: 37 },
          { 日期: "5月", 次数: 45 },
          { 日期: "6月", 次数: 13 },
          { 日期: "7月", 次数: 35 },
          { 日期: "8月", 次数: 17 },
          { 日期: "9月", 次数: 37},
          { 日期: "10月", 次数: 45 },
          { 日期: "11月", 次数: 37 },
          { 日期: "12月", 次数: 45},
        ],
      },
      chartData1: {
        columns: ["预警类型", "预警数量"],
        rows: [
          { 预警类型: "扬尘", 预警数量: 1393 },
          { 预警类型: "噪声", 预警数量: 1393 },
          { 预警类型: "风速", 预警数量: 1393 },
          { 预警类型: "PM2.5", 预警数量: 3530 },
          { 预警类型: "PM10", 预警数量: 1393 },
        ],
      },
    };
  },
  methods: {
    search() {
      console.log("bbb", this.ruleForm);
      http.TaDiaobiao(this.ruleForm).then((res) => {
        this.tableData = res.data;
        this.setCurrList(1);
        console.log("塔吊表格查询1", res);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handle(tab, event) {
      console.log(tab, event);
    },
    // 分页
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
      // console.log('当前页',index);
    },
    //改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      // console.log(val);
    },
    // 表格序号
    indexFn(index) {
      index = index + 1 + (this.currPage - 1) * this.pageSize;
      return index;
    },
    //选中复选框获取下标
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      // let ids = [];
      // this.multipleSelection.map((item) => {
      //   ids.push(item.key);
      // });
      // this.selectedIDs = ids;
      // console.log("你点击的是", this.selectedIDs);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    queryInfo() {
      // 环境10
      http.huanjing1({}).then((res) => {
        this.arr = res;
        console.log("环境", res);
      });
   
    },
  },
  mounted() {
    // 天气
    (window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: 1,
        tmpColor: "FFFFFF",
        tmpSize: 23,
        cityColor: "FFFFFF",
        citySize: 20,
        aqiSize: 16,
        weatherIconSize: 50,
        alertIconSize: 18,
        padding: "40px 40px 40px 40px",
        shadow: "1",
        language: "auto",
        borderRadius: 5,

        fixed: "false",
        vertical: "middle",
        horizontal: "center",
        key: "GhxyemyMgV",
        backgroundColor: "black",
      },
    }),
      (function (d) {
        var c = d.createElement("link");
        c.rel = "stylesheet";
        c.href =
          "https://apip.weatherdt.com/simple/static/css/weather-simple.css?v=2.0";
        var s = d.createElement("script");
        s.src =
          "https://apip.weatherdt.com/simple/static/js/weather-simple.js?v=2.0";
        var sn = d.getElementsByTagName("script")[0];
        sn.parentNode.insertBefore(c, sn);
        sn.parentNode.insertBefore(s, sn);
      })(document);
    console.log(WIDGET);
    http.Huanjingbiao({ equipment_type_id: 5 }).then((res) => {
      this.tableData = res.data;
      this.setCurrList(1);
      console.log("环境表格", res);
    });
       http.huanjing1chart({}).then((res) => {
        this.chart1 = res;
        for (let i = 0; i < this.chartData.rows.length; i++) {
          this.chartData.rows[i].次数 = this.chart1[i];
        }
        console.log("环境表", res);
      });
      http.Huanjingbiao2({}).then((res) => {
        this.chart2 = res;
        for (let i = 0; i < this.chartData1.rows.length; i++) {
          this.chartData1.rows[i].预警数量 = this.chart1[i];
        }
        console.log("塔吊图表2", res);
      });
    this.queryInfo();
    this.timer = setInterval(() => {
      setTimeout(this.queryInfo, 0);
    }, 1000 * 60);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>
<style scoped>
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-button {
  height: 30px;
  padding: 8px 15px;
}
.l-ta4-1-right {
  width: 340px;
  margin-right: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.jiankong1 {
  margin-left: 100px;
}

.jiankong1 img {
  width: 200px;
  height: 160px;
}
.l-div-left-all {
  margin-top: 15px;
}
.l-div-left {
  width: 100%;
  height: 70px;
  /* background: violet; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 5px;
}
.l-div-left-1 {
  width: 260px;
  height: 50px;
  /* background: wheat; */
  display: flex;
  justify-content: space-between;

  align-items: center;
}
.l-div-left-1-2 {
  width: 90px;
  text-align: center;
}
.l-div-left-1-3 {
  width: 90px;
  text-align: center;
}

.l-div-left-1-1 img {
  width: 35px;
  height: 35px;
}
.l-div-left-1-2-2 {
  text-align: center;
}
.l-div-left-1-2-1 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 17px;
}
.l-div-left-1-2-2 {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}

.big-div {
  width: 100%;
  height: 680px;
  overflow-y: scroll;
}
.y-conter {
  width: 100%;
  height: 600px;
  background: #eee;
}
.y-top {
  width: 100%;
  height: 230px;
}
.y-div-left {
  width: 70%;
  height: 230px;
  background: #fff;
  float: left;
}
.y-div-right {
  width: 29%;
  height: 230px;
  background: #fff;
  float: left;
  margin-left: 10px;
}
.y-title {
  display: inline-block;
  width: 100%;
  padding: 10px;
  height: 30px;
  font-size: 15px;
  font-weight: bold;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 70px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.col-1 {
  width: 60px;
  height: 45px;
  float: left;
}
.col-1-1 {
  width: 120px;
  height: 30px;
  float: left;
  margin-top: 10px;
}
.col-1-2 {
  width: 120px;
  height: 30px;
  float: left;
}
.col-2-1 {
  padding-right: 10px;
}
.div-1 {
  width: 95%;
  margin: 0px auto;
}
.img-1 {
  width: 35px;
  height: 35px;
  margin-top: 10px;
}
/* 天气 */
.tian {
  width: 93%;
  margin-left: 15px;
  position: relative;
  z-index: 1;
  /* width: 50px; */
  /* height: 100px; */
  /* width: 200px; */
  margin-top: 20px;
}
.f-adiv1-zi {
  font-size: 17px;
  font-weight: 600;
  margin-left: 15px;
  margin-top: 15px;
  /* overflow: hidden; */
}
#weather-v2-plugin-simple {
  background-color: black !important;
}
.s-sticker {
  background-color: black !important;
}
.y-row-1 {
  width: 70%;
  height: 430px;
  margin-top: 10px;
  float: left;
  background: #fff;
}
.y-row-2 {
  width: 29%;
  height: 210px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  background: #fff;
}
.y-row-3 {
  width: 29%;
  height: 210px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  background: #fff;
}
.y-yj {
  width: 100%;
  height: 400px;
  /* background: red; */
}
.y-tab-right {
  width: 367px;
  float: right;
  margin-top: 10px;
}
.y-tab-left {
  /* float: left; */
  height: 30px;
  width: 200px;
  margin-top: 10px;
  padding-left: 15px;
}
.y-font-1 {
  font-size: 15px;
  font-weight: bold;
  /* padding-left: 15px; */
}
.jk-1 {
  width: 100%;
  height: 30px;
  margin-top: 15px;
  /* background: rebeccapurple; */
}
.jk-2 {
  width: 100%;
  height: 30px;
  margin-top: 15px;
  /* background: rebeccapurple; */
}
.y-font-3 {
  font-size: 15px;
  font-weight: bold;
  padding-left: 10px;
}
/* 表格 */
.y-table-1 {
  width: 100%;
  height: 400px;
}
.y-row-4 {
  width: 70%;
  height: 400px;
  margin-top: 10px;
  float: left;
  background: #fff;
}
.y-row-5 {
  width: 29%;
  height: 400px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  background: #fff;
}
.y-s-1 {
  width: 100%;
  height: 40px;
  padding-left: 20px;
  padding-top: 10px;
  font-size: 15px;
  font-weight: bold;
  /* background: pink; */
}
.y-put {
  width: 98%;
  height: 50px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  /* background: pink; */
  /* position: relative; */
}
.el-form {
  display: inline-block;
}
.y-input {
  position: absolute;
  right: 0px;
  top: 0px;
}
.table {
  width: 98%;
  height: 300px;
  margin: 0px auto;
}
.y-s-2 {
  display: inline-block;
  margin-top: 10px;
  /* padding-top: 20px; */
  padding-left: 10px;
  font-weight: bold;
  font-size: 15px;
}
.el-input >>> .el-input__inner {
  width: 220px !important;
  height: 30px;
}
.el-select >>> .el-input__inner {
  width: 220px !important;
  height: 30px;
}
.btn-2 {
  height: 30px;
  line-height: 6px;
  margin-top: 7px;
}
.f-fenye {
  float: right;
  margin-top: 15px;
}
.l-fen {
  width: 100%;
  height: 60px;
  background: white;
}
</style>